<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{:config("app.app_name")}</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="__STATIC__/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="__STATIC__/css/public.css?v=2.0.4.3" media="all">
    <link rel="stylesheet" href="__STATIC__/css/themes/default.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body  >
<div class="layuimini-container">
    <div class="layuimini-main">



   

        <table class="layui-hide" id="ID-treeTable-demo"></table>
        <script type="text/html" id="TPL-treeTable-demo">
<!--            <div class="layui-btn-container">-->
<!--                <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>-->
<!--            </div>-->
        <a class="layui-btn layui-btn-normal layui-btn-sm {:checkAutoBtn('admin/Menu/create')?'':'layui-hide'}" lay-event="addChild">添加</a>
        </script>
        <script type="text/html" id="TPL-treeTable-demo-tools">
            <div class="layui-btn-container">
                <a class="layui-btn layui-btn-primary layui-btn-xs {:checkAutoBtn('admin/Menu/edit')?'':'layui-hide'}" lay-event="detail">查看</a>
                {{# if(d.isParent === 1){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs {:checkAutoBtn('admin/Menu/create')?'':'layui-hide'}" lay-event="addChild">添加</a>
                {{# } }}
                <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete {:checkAutoBtn('admin/Menu/delete')?'':'layui-hide'}" lay-event="delete">删除</a>
            </div>
        </script>
        <script type="text/html" id="status">
            {{# if(d.status === 1){ }}
            <span class="layui-badge layui-bg-green">显示</span>
            {{# } else { }}
            <span class="layui-badge">隐藏</span>
            {{# } }}
        </script>
        <script type="text/html" id="isParent">
            {{# if(d.isParent === 1){ }}
            <span class="layui-badge layui-bg-blue">菜单</span>
            {{# } else { }}
            <span class="layui-badge layui-bg-green">按钮</span>
            {{# } }}
        </script>
    </div>
</div>
<script src="__JS__/jquery.min.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
<script src="__STATIC__/layui/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script src="__JS__/common.js"></script>
<script>

    layui.use( function () {
        var $ = layui.jquery;
        var treeTable = layui.treeTable;
        var layer = layui.layer;
        var dropdown = layui.dropdown;
        // 渲染
        var inst = treeTable.render({
            elem: '#ID-treeTable-demo',
            id:'Menu',
            url: '/admin/Menu', // 此处为静态模拟数据，实际使用时需换成真实接口
            tree: {
                customName: {name:"title"},
            },
            maxHeight: '701px',
            toolbar: '#TPL-treeTable-demo',
            cols: [[
                /*{type: 'checkbox', fixed: 'left'},*/
                {field: 'id', title: 'ID',  sort: true},
                {field: 'title', title: '名称',},
                {field: 'name', title: '标识符',},
                {field: 'isParent', title: '类型',templet: '#isParent'},
                {field: 'status', title: '状态',templet: '#status'},

                {fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#TPL-treeTable-demo-tools"}
            ]],
            page: true,
            done:function(data){
                if(data.data&&data.data.length>0){
                    data.data.forEach(function(item,index){
                        if(index.length==1){}
                        treeTable.expandNode('Menu', {
                            index: index, // 第一行
                            expandFlag: true // 展开
                        });
                    })
                }
            }
        });

        // 表头工具栏工具事件
        treeTable.on("toolbar(Menu)", function (obj) {
            var config = obj.config;
            var tableId = config.id;
            var status = treeTable.checkStatus(tableId);
            // 获取选中行
            if (obj.event === "getChecked") {
                if(!status.data.length) return layer.msg('无选中数据');
                console.log(status);
                layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
            }else if (obj.event=='addChild'){

                var index = layer.open({
                    title: '添加菜单',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/admin/Menu/create?pid=0',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });
        // 单元格工具事件
        treeTable.on('tool('+ inst.config.id +')', function (obj) {
            var layEvent = obj.event; // 获得 lay-event 对应的值
            var trElem = obj.tr;
            var trData = obj.data;
            var tableId = obj.config.id;
            if (layEvent === "detail") {
                var index = layer.open({
                    title: '查看菜单',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'Menu/'+trData.id+'/edit',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (layEvent === "addChild") {
                var index = layer.open({
                    title: '添加菜单',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/admin/Menu/create?pid='+trData.id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }else if (layEvent === "delete") {
                layer.open({
                    shade: false,
                    content: '确定删除？',
                    btn: ['确定', '取消'],
                    yes: function (index) {
                        Ajax('Menu/'+trData.id,"delete",[],
                            success=function (info) {
                                if (info.code === 1) {
                                        setTimeout(function () {
                                            location.href = info.url;
                                        }, 1000);
                                }
                                layer.msg(info.msg);

                            },error=function(e){
                                console.log(e,22)
                            }
                        );
                        layer.close(index);
                    }
                });
            } else if (layEvent === "more") {
                // 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    align: "right", // 右对齐弹出
                    data: [
                        {
                            title: "修改积分",
                            id: "edit"
                        },
                        {
                            title: "删除",
                            id: "del"
                        }
                    ],
                    click: function (menudata) {
                        if (menudata.id === "del") {
                            layer.confirm("真的删除行么", function (index) {
                                obj.del(); // 等效如下
                                // treeTable.removeNode(tableId, trElem.attr('data-index'))
                                layer.close(index);
                            });
                        } else if (menudata.id === "edit") {
                            layer.prompt({
                                value: trData.experience,
                                title: "输入新的积分"
                            }, function (value, index) {
                                obj.update({ experience: value }); // 等效如下
                                // treeTable.updateNode(tableId, trElem.attr('data-index'), {experience: value});
                                layer.close(index);
                            });
                        }
                    }
                });
            }
        });

    });
</script>

</body>
</html>
